const HUNGER_INTERVAL = 10000 // 10秒const HUNGER_INTERVAL = 10000// const HUNGER_INTERVAL = 120000 // 2分钟const HUNGER_INTERVAL = 10000 // 10秒 // 10秒<template>
  <div class="adopt-pets-container">
    <h2 class="adopt-title">领养宠物</h2>
    <p class="adopt-desc">这些可爱的宠物正在等待一个温暖的家，选择一个你喜欢的宠物吧！</p>
    <el-row :gutter="20" class="pets-grid">
      <el-col :span="8" v-for="candidate in petCandidates" :key="candidate.id">
        <div class="pet-card" :class="{ 'is-selected': selectedPet?.id === candidate.id }">
          <div class="pet-avatar">
            <div v-if="getPetIcon(candidate.species)" class="pet-emoji">{{ getPetIcon(candidate.species) }}</div>
          </div>
          <div class="pet-info">
            <div class="pet-species">{{ getPetSpeciesLabel(candidate.species) }}</div>
            <div class="pet-intro">{{ candidate.introduction }}</div>
          </div>
          <div class="pet-select">
            <el-button 
              type="primary" 
              :plain="selectedPet?.id !== candidate.id"
              @click="selectPet(candidate)"
            >
              {{ selectedPet?.id === candidate.id ? '已选择' : '选择' }}
            </el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      v-model="dialogVisible"
      title="领养宠物"
      width="500px"
      :close-on-click-modal="false"
      :show-close="true"
      @close="handleDialogClose"
    >
      <el-form :model="form" :rules="rules" ref="formRef" @submit.prevent="handleCreate">
        <div class="selected-pet-info" v-if="selectedPet">
          <div class="pet-avatar">
            <div class="pet-emoji">{{ getPetIcon(selectedPet.species) }}</div>
          </div>
          <div class="pet-details">
            <div class="pet-species">{{ getPetSpeciesLabel(selectedPet.species) }}</div>
            <div class="pet-intro">{{ selectedPet.introduction }}</div>
          </div>
        </div>
        <el-form-item prop="name">
          <el-input v-model="form.name" placeholder="给你的宠物起个名字">
            <template #prefix>
              <el-icon><Avatar /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="introduction">
          <el-input
            v-model="form.introduction"
            type="textarea"
            :rows="3"
            placeholder="为你的宠物写一句介绍（可选）"
          />
        </el-form-item>
        <el-form-item class="dialog-footer">
          <el-button @click="handleDialogClose">取消</el-button>
          <el-button type="primary" native-type="submit" :loading="loading">
            确认领养
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { usePetStore } from '../stores/pet'
import { ElMessage } from 'element-plus'
import { Avatar } from '@element-plus/icons-vue'

export default {
  name: 'PetAdoptPanel',
  components: { Avatar },
  emits: ['pet-adopted'],
  setup(props, { emit }) {
    const petStore = usePetStore()
    const formRef = ref()
    const loading = ref(false)
    const selectedPet = ref(null)
    const petCandidates = ref([])
    const form = ref({ name: '', introduction: '' })
    const dialogVisible = ref(false)

    const rules = {
      name: [
        { required: true, message: '请输入宠物名称', trigger: 'blur' },
        { min: 2, message: '名称至少2个字符', trigger: 'blur' }
      ],
      introduction: [
        { max: 100, message: '介绍不能超过100个字符', trigger: 'blur' }
      ]
    }
    const getPetSpeciesLabel = (species) => {
      const labels = {
        cat: '猫咪', dog: '狗狗', rabbit: '兔子', hamster: '仓鼠', parrot: '鹦鹉'
      }
      return labels[species] || species
    }
    const getPetIcon = (species) => {
      const icons = {
        cat: '🐱', dog: '🐶', rabbit: '🐰', hamster: '🐹', parrot: '🦜'
      }
      return icons[species] || ''
    }
    
    const selectPet = (pet) => {
      selectedPet.value = selectedPet.value?.id === pet.id ? null : pet
      if (selectedPet.value) {
        dialogVisible.value = true
      }
    }

    const handleDialogClose = () => {
      dialogVisible.value = false
      selectedPet.value = null
      form.value.name = ''
      form.value.introduction = ''
      if (formRef.value) {
        formRef.value.resetFields()
      }
    }
    const handleCreate = async () => {
      if (!formRef.value || !selectedPet.value) return
      try {
        await formRef.value.validate()
        loading.value = true
        await petStore.createPet(
          form.value.name,
          selectedPet.value.species,
          selectedPet.value.appearance,
          selectedPet.value.personality,
          form.value.introduction
        )
        // 领养成功后发出事件
        emit('pet-adopted')
        // 关闭对话框
        handleDialogClose()
        ElMessage.success('领养成功！')
        emit('pet-adopted') // 触发领养成功事件
      } catch (error) {
        console.error('Create pet error:', error)
        ElMessage.error('创建宠物失败')
      } finally {
        loading.value = false
      }
    }
    onMounted(async () => {
      petCandidates.value = await petStore.fetchPetCandidates()
    })
          return {
        petCandidates,
        selectedPet,
        form,
        rules,
        formRef,
        loading,
        dialogVisible,
        handleCreate,
        getPetSpeciesLabel,
        getPetIcon,
        selectPet,
        handleDialogClose
      }
  }
}
</script>

<style scoped>
.adopt-pets-container {
  padding: 20px;
}

.adopt-title {
  text-align: center;
  font-size: 28px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #1989fa, #5e72e4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

.adopt-desc {
  text-align: center;
  color: #606266;
  margin-bottom: 40px;
  font-size: 16px;
}

.pets-grid {
  margin-bottom: 40px;
}

.pet-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid transparent;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.pet-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.pet-card.is-selected {
  border-color: var(--el-color-primary);
  background: rgba(64, 158, 255, 0.05);
}

.pet-avatar {
  text-align: center;
  margin-bottom: 16px;
}

.pet-emoji {
  font-size: 48px;
  animation: bounce 2s infinite;
}

.pet-info {
  flex: 1;
}

.pet-species {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
  text-align: center;
}

.pet-intro {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.pet-select {
  text-align: center;
  margin-top: 16px;
}

.selected-pet-info {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
}

.selected-pet-info .pet-avatar {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.selected-pet-info .pet-emoji {
  font-size: 32px;
}

.selected-pet-info .pet-details {
  flex: 1;
}

.selected-pet-info .pet-species {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.selected-pet-info .pet-intro {
  font-size: 14px;
  color: #606266;
  line-height: 1.4;
}

.dialog-footer {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

:deep(.el-dialog__header) {
  margin-right: 0;
  border-bottom: 1px solid #dcdfe6;
  padding-bottom: 16px;
}

:deep(.el-dialog__body) {
  padding: 24px;
}

:deep(.el-form-item:last-child) {
  margin-bottom: 0;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .adopt-pets-container {
    padding: 16px;
  }

  .adopt-title {
    font-size: 24px;
  }

  .adopt-desc {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .pet-card {
    padding: 16px;
  }

  .pet-emoji {
    font-size: 36px;
  }

  .adopt-form {
    padding: 24px;
  }
}
</style>